<template>
  <div class="main-container">
    <el-container class="content-container">
      <el-header>
        <!-- 左侧logo -->
        <img src="../../assets/images/logo.png" alt="" />
        <!-- 右侧菜单 —— 采用element-ui的✨导航菜单 -->
        <el-menu class="el-menu-top" mode="horizontal" background-color="#23262E" text-color="#fff"
          active-text-color="#409EFF" router>
          <el-submenu index="1">
            <template slot="title">
              <!-- 头像 -->
              <img src="../../assets/images/avatar.jpg" alt="" class="avatar" />
              <span>个人中心</span>
            </template>
            <el-menu-item index="user-info"><i class="el-icon-s-operation"></i>基本资料</el-menu-item>
            <el-menu-item index="user-avatar"><i class="el-icon-camera"></i>更换头像</el-menu-item>
            <el-menu-item index="user-pwd"><i class="el-icon-key"></i>重置密码</el-menu-item>
          </el-submenu>
          <el-menu-item index="home" @click="quit"><i class="el-icon-switch-button"></i>退出</el-menu-item>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 侧边栏顶部头像信息 -->
          <div class="user-box">
            <img v-if="user_pic" :src="user_pic" alt="" />
            <img v-else src="../../assets/images/avatar.jpg" alt="" />
            <span>欢迎 {{ nickname || username }}</span>
          </div>
          <!-- 侧边栏导航菜单 -->
          <el-menu default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color="#23262E" text-color="#fff" active-text-color="#409EFF" unique-opened router>
            <template v-for="item in menus">
              <!-- 不包含二级菜单 -->
              <el-menu-item v-if="!item.children" :index=" item.indexPath"
                :key="item.indexPath">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </el-menu-item>

              <!-- 包含二级菜单 -->
              <el-submenu v-else :index="item.indexPath" :key="item.title">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{ item.title }}</span>
                </template>
                <!-- ② 进行数据的二次循环 -->
                <el-menu-item v-for="subItem in item.children" :key="subItem.indexPath"
                  :index="subItem.indexPath">
                  <i :class="subItem.icon"></i>{{ subItem.title }}
                </el-menu-item>
              </el-submenu>
            </template>
          </el-menu>
          <!-- 侧边栏导航菜单 -->
        </el-aside>
        <el-container>
          <!-- 3.1页面主体区域 -->
          <el-main>
            <router-view></router-view>
          </el-main>
          <!-- 3.2底部footer区域 -->
          <el-footer>© www.splendour-sir.cn -欢迎辉sir~</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import { getMenusAPI } from '@/api'
export default {
  name: 'my-main',
  computed: {
    ...mapGetters(['username', 'nickname', 'user_pic'])
  },
  data () {
    return {
      menus: [] // 侧边栏
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    // 退出登录
    quit () {
      // 使用element-ui的MessageBox弹框
      this.$confirm('您确认退出登录吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 确定 => 退出登录后清空vuex 中的用户信息和token值
          this.$message.success('退出成功!')
          this.$store.commit('updateToken', '')
          this.$store.commit('updateUserInfo', '')
          // 跳转到登录页面
          this.$router.replace('/login')
        })
        .catch(() => {
          // 取消
          this.$message.info('已取消退出操作')
        })
    },
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    async getMenu () {
      const { data: res } = await getMenusAPI()
      // 打印看看是否能获取左侧菜单成功
      // console.log(res)
      this.menus = res.data
    }
  },
  created () {
    this.getMenu()
  }
}
</script>

<style lang="less" scoped>
.main-container {
  height: 100%;

  .content-container {
    height: 100%;

    .el-header,
    .el-aside {
      background-color: #23262e;
    }

    .el-header {
      display: flex;
      padding: 0;
      justify-content: space-between;
    }

    .el-main {
      overflow-y: scroll;
      height: 0;
      background-color: #f2f2f2;
    }

    .el-footer {
      background-color: #eee;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.avatar {
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-right: 10px;
  object-fit: cover;
}

// 左侧边栏用户信息区域
.user-box {
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  user-select: none;

  img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 15px;
    object-fit: cover;
  }

  span {
    color: white;
    font-size: 12px;
  }
}

// 侧边栏菜单的样式
.el-aside {

  .el-submenu,
  .el-menu-item {
    width: 200px;
    user-select: none;
  }
}
</style>
